import React from 'react'
import {Card,Button,Table,Popconfirm} from 'antd'
import 'antd/dist/antd.css';
import {connect} from 'react-redux'
import { loadProduct} from '../../../store/action/product' 
import Logo from '../../../components/frame/logo/main.jpeg'
class list extends React.Component{
    constructor(props){
        super(props);
        this.state={
            data:[],
        }
    }
    componentDidMount(){
        this.props.dispatch(loadProduct({
            page: 121
        }));
        this.getData();
        console.log('ffff')
        console.log(this.props);
    }
    getData(){
        console.log("你好")
        console.log(this.props)
        this.setState({data: this.props.list});
    }
    render(){
        const props=this.props;
        const {data}=this.state;
        const colunms=[{
            title:'序号',
            key:'id',
            width:80,
            align:'center',
            render: (txt,record,index)=> index+1,
        },{
            title:'商品名',
            dataIndex:'name',
            width:80,
            align:'center'
        },
        {
            title:'价格',
            dataIndex:'price',
            width:80,
            align:'center'
        },{
            title:'数量',
            dataIndex:'number',
            width:80,
            align:'center'
        },
        {
            title:'主图',
            dataIndex:'mainImage',
            width:80,
            render:(txt,record)=>
                record.mainImage?(<img src={Logo} alt={record.name} style={{width:60}}/>):("暂无图片")
            
        },
        {
            title:'操作',
            width: 100,
            render: (txt,record,index)=>{
                return (<div>
                <Button type="primary" size="small"
                onClick={()=>props.history.push('/admin/edit/'+record.id)}
                >修改</Button>
                <Popconfirm 
                title='确认删除'
                okText='是'
                cancelText='否'
                onCancel={()=>{}}
                onConfirm={()=>{}}
                >
                <Button type="danger" style={{margin: '0 1rem'}}size="small">删除</Button>
                </Popconfirm>
                </div>)
            }
        }];
    //     const data=[{
    //         id: 1,
    //         name: "纸巾",
    //         price: '12',
    //         number: 12,
    //         mainImage:12,
    //     },
    //     {
    //         id: 2,
    //         name: "纸巾",
    //         price: '12',
    //         number: 12,
    //          mainImage:12,
    //     },
    //     {
    //         id: 3,
    //         name: "纸巾",
    //         price: '12',
    //         number: 12,
    //          mainImage:12,
    //     }
    // ];
        return (
            <Card title="商品列表" 
            extra={<Button type='primary' onClick={()=>props.history.push('/admin/edit')}
            size="small">新建</Button>}>
    <Table bordered columns={colunms} dataSource={data}
    
    ></Table>
            </Card>
        )
    }
    
}
const mapStateToProps=state=>state.product;
export default connect(mapStateToProps)(list)
